<template>
	<view :class="themeName">
		<view @touchmove.stop.prevent="clear" v-show="showPopup">
			<view class="popup_mask" @touchmove.stop.prevent="clear"></view>
			<view class="popup_content">
				<view class="title">{{ $zhTran(title) }}</view>
				<view class="explain_text">
					<view class=""> {{$zhTran('感谢您选择KdShop商城APP！')}} </view>
					<view class="line">
						{{$zhTran('我们非常重视您的个人信息和隐私保护。为了更好地保障您的个人权益，在您使用我们的产品前，请务必审慎阅读')}}
						<navigator :url="policyPath" class="path" hover-class="navigator-hover">{{$zhTran('《隐私政策》')}}
						</navigator>
						{{$zhTran('和')}}
						<navigator :url="protocolPath" class="path" hover-class="navigator-hover">{{$zhTran('《服务协议》')}}
						</navigator>
						{{$zhTran('如您同意以上协议内容，请点击”同意并继续”，开始使用我们的产品和服务!')}}
					</view>
				</view>

				<view class="button">
					<view @tap="back">{{$zhTran('不同意')}}</view>
					<view @tap="confirm" class="confirm-btn">{{$zhTran('同意并继续')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "lyg-popup",
		props: {
			title: {
				type: String,
				default: "服务协议和隐私政策",
			},
			// 协议路径
			protocolPath: {
				type: String,
			},
			// 政策路径
			policyPath: {
				type: String,
			},
			policyStorageKey: {
				type: String,
				default: "had_read_privacy",
			},
			showTabbar: {
				type: Boolean,
			},
		},
		data() {
			return {
				showPopup: false,
			};
		},
		created: function() {
			var that = this;
			console.log("lyg-popup created");
			uni.getStorage({
				key: this.policyStorageKey,
				success: (res) => {
					if (res.data) {
						that.showPopup = false;
						that.$emit("update:showTabbar", true);
					}
				},
				fail: function(e) {
					that.showPopup = true;
					that.$emit("update:showTabbar", false);
					console.log(e);
				},
			});
		},
		methods: {
			// 禁止滚动
			clear() {
				return;
			},
			back() {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform == "ios") {
					const threadClass = plus.ios.importClass("NSThread");
					const mainThread = plus.ios.invoke(threadClass, "mainThread");
					// plus.ios.invoke(mainThread, "exit");
					//上面的不起效果下面的
					plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
				} else if (uni.getSystemInfoSync().platform == "android") {
					plus.runtime.quit();
				}
				// #endif
			},
			// 关闭弹框
			confirm() {
				this.showPopup = false;

				uni.setStorage({
					key: this.policyStorageKey,
					data: true,
				});
				this.$emit("update:showTabbar", true);
			},
		},
	};
</script>

<style lang="scss">
	.popup_mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		z-index: 98;
	}

	.popup_mask {
		opacity: 1;
	}

	.popup_content {
		overflow: hidden;
		box-sizing: border-box;
		position: fixed;
		bottom: 30%;
		border-radius: 8px;
		left: 50%;
		margin-left: -46%;
		right: 0;
		min-height: 400rpx;
		background: #ffffff;
		width: 92%;
		z-index: 99;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			padding: 40rpx 0 34rpx;
		}

		.explain_text {
			font-size: 30rpx;
			padding: 0 50rpx 40rpx;
			line-height: 42rpx;

			.line {
				display: block;

				// word-break:break-all; // 允许单词内换行
				.path {
					@include font_color();
					display: inline-block;
					text-align: center;
					// word-break:break-all; // 允许单词内换行
				}
			}
		}

		.button {
			display: flex;
			padding: 30rpx 0;
			align-items: center;
			font-size: 32rpx;
			justify-content: space-around;
			border-top: 1rpx solid #f2f2f2;

			view {
				text-align: center;
				flex: 1;
			}

			.confirm-btn {
				@include font_color();
			}
		}
	}
</style>